<template>
  <div class="app-container">
    <!-- 对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column type="index" label="序号" align="center" width="50"/>
<!--        <el-table-column label="物料名称" align="center" prop="materialName"/>-->
        <el-table-column label="物料代码" align="center" prop="modeCode"/>
        <el-table-column label="客户零件号" align="center" prop="partNumber"/>
        <el-table-column label="零件简号" align="center" prop="partNumberShort"/>
        <el-table-column label="数量" align="center" prop="materialCount"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="shipOrder && shipOrder.status === 'NEW'" type="primary" @click="openCreatePickTask" :disabled="formLoading" size="small">创建拣货任务</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <!-- 对话框(创建拣货任务) -->
    <CreatePickTask ref="createPickTaskRef"/>
  </div>
</template>
<script>

import {getShipOrderDetailList} from "@/api/hs/shiporderdetail";
import CreatePickTask from "@/views/hs/componnets/CreatePickTask.vue";
import {getShipOrder} from "@/api/hs/shiporder";

export default {
  name: "ShipOrderDetailList",
  components: {CreatePickTask},
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 遮罩层
      loading: true,
      // 物料信息列表
      list: [],
      // 出库单信息
      shipOrder: undefined,
      // 重新渲染表格状态
      refreshTable: true,
      // 表单的加载中
      formLoading: false,
      // 出库单ID
      shipOrderId: undefined,
    };
  },
  methods: {
    /** 打开弹窗 */
    async open(shipOrderCode) {
      this.dialogVisible = true;
      this.dialogTitle = "出库单详情";
      this.shipOrderCode = shipOrderCode;
      this.shipOrder = {};
      this.list = [];
      await this.getList(shipOrderCode);
      await this.getShipOrder(this.list[0].shipOrderId);
    },
    /** 查询列表 */
    async getList(shipOrderCode) {
      try {
        this.loading = true;
        const res = await getShipOrderDetailList(shipOrderCode);
        this.list = res.data;
        this.shipOrderId = this.list[0].shipOrderId;
      } finally {
        this.loading = false;
      }
    },
    /** 查询出库单信息 */
    async getShipOrder() {
      try {
        this.loading = true;
        const res = await getShipOrder(this.shipOrderId);
        this.shipOrder = res.data;
      } finally {
        this.loading = false;
      }
    },
    /** 打开创建拣货任务对话框 */
    openCreatePickTask() {
      this.$refs["createPickTaskRef"].open(this.shipOrderCode);
      this.dialogVisible = false;
    }
  }
}
</script>
<style scoped lang="scss">

</style>
